<template>
  <div v-loading="loading" class="detail-page">
    <div class="article-info" :style="{ backgroundImage: coverUrl }">
      <div class="font-shadow">
        <h1 class="article-title">{{ detailContent.title }}</h1>
        <div class="post-info">
          <span
            ><i class="el-icon-chat-dot-round"></i>评论 {{ commentTotal }}</span
          >
          <span
            ><i class="el-icon-like"></i>点赞 {{ detailContent.likes }}</span
          >
        </div>
      </div>
    </div>
    <div class="other-info">
      <img class="author-avatar" @click="toUserInfo" :src="avatarUrl" />
      <span class="author-name" @click="toUserInfo">{{
        detailContent.username
      }}</span>
      <span class="update-time"
        >更新于:{{ detailContent.updated_at | formatDate }}</span
      >
      <div>
        <span
          @click="loadArticleByType"
          v-for="item in detailContent.type"
          class="type-content"
          :key="item"
          >{{ item }}</span
        >
      </div>
    </div>
    <mavon-editor
      class="md"
      :value="detailContent.content"
      :subfield="false"
      :defaultOpen="'preview'"
      :toolbarsFlag="false"
      :editable="false"
      :scrollStyle="true"
      :ishljs="true"
    ></mavon-editor>
    <el-divider class="divider"></el-divider>
    <comment-list @comment-total="getCommentTotal"></comment-list>
  </div>
</template>

<script>
import { api } from "@/api";
import CommentList from "@/components/CommentList.vue";
export default {
  data() {
    return {
      detailContent: {
        title: "",
        type: [],
        likes: 0,
        created_at: "",
        updated_at: "",
        content: "",
        cover: "",
        username: "",
      },
      commentTotal: 0,
      loading: false,
    };
  },
  components: {
    CommentList,
  },
  methods: {
    async loadArticleContent(id) {
      this.loading = true;
      this.detailContent = (
        await this.$axios(api.article.getArticleContent(id))
      ).data;
      this.loading = false;
    },
    loadArticleByType(e) {
      const type = e.target.innerText;
      this.$router.push({ path: "/type", query: { content: type } });
    },
    toUserInfo() {
      this.$router.push({
        path: "/otherUser",
        query: { username: this.detailContent.username },
      });
    },
    getCommentTotal(total) {
      this.commentTotal = total;
    },
  },
  computed: {
    coverUrl() {
      return (
        "url(" +
        "/api/" +
        api.article.getCover1(this.$route.query.id).url +
        `?${Math.random()}` +
        ")"
      );
    },
    avatarUrl() {
      return (
        "/api/" +
        api.user.getAvatar(this.detailContent.username).url +
        `?${Math.random()}`
      );
    },
  },
  filters: {
    formatDate(input) {
      return new Date(input).format("yyyy-MM-dd");
    },
  },
  mounted() {
    this.loadArticleContent(this.$route.query.id);
  },
};
</script>

<style lang="less" scoped>
.detail-page {
  margin-top: 60px;
  .article-info {
    width: 60%;
    @media screen and (max-width: 1024px) {
      width: 95%;
    }
    height: 200px;
    display: block;
    margin: 0 auto;
    background-size: cover;
    border-radius: 5px 5px 0 0;
    .font-shadow {
      color: white;
      padding: 75px 0 0 0;
      text-align: center;
      text-shadow: 1px 1px 2px rgb(0 0 0 / 80%);
      height: 125px;
      background: rgba(0, 0, 0, 0.3);
      .article-title {
        display: block;
        line-height: 25px;
        font-size: 21px;
        margin: 0 auto;
      }
      .post-info {
        margin-top: 20px;
        span::before {
          content: "  •  ";
        }
      }
    }
  }
  .other-info {
    margin: 0 auto;
    width: 60%;
    @media screen and (max-width: 1024px) {
      width: 95%;
    }
    height: 100px;
    background: rgb(251, 251, 251);
    .author-avatar {
      margin: 5px 0 0 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
    }
    .update-time {
      position: absolute;
      font-size: 16px;
      margin-left: 5px;
      margin-top: 35px;
    }
    .author-name {
      margin-top: 5px;
      margin-left: 5px;
      position: absolute;
      font-size: 21px;
      font-weight: bold;
      cursor: pointer;
    }
    .type-content {
      cursor: pointer;
      margin: 0 5px;
      color: rgb(119, 109, 255);
      font-size: 20px;
      &::before,
      &::after {
        content: "#";
      }
    }
  }
  .md {
    width: 60%;
    @media screen and (max-width: 1024px) {
      width: 95%;
    }
    margin: 0 auto;
  }
  .divider {
    width: 60%;
    @media screen and (max-width: 1024px) {
      width: 95%;
    }
    margin: 40px auto;
  }
}
</style>
